<template>
    <el-dialog
      :visible.sync="visible"
      :title="dataForm.details ? '详情' :(!dataForm.id ? $t('add') : $t('update'))"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      @close="close()"
      @open="open()"
      :destroy-on-close="true"
    >
      <el-form
        :model="dataForm"
        :rules="dataRule"
        ref="dataForm"
        @keyup.enter.native="dataFormSubmitHandle()"
        :label-width="$i18n.locale === 'en-US' ? '120px' : '120px'"
        label-position="right"
        :disabled="disabled"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="路线名称" prop="routeName">
                <el-input type="text" v-model="dataForm.routeName" :placeholder="disabled?'':'路线名称'"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" v-if="!disabled">
            <el-form-item class="imgLabel" label="可选景点" prop="">
                <div class="spot_list">
                    <div class="sl_item" v-for="(item,index) in spotList" :key="index" @click="selectSpot(item)">
                        {{ item.name }}
                    </div>
                </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="途径景点" prop="">
                <div class="spot_list_yx">
                    <div class="sl_pre" v-for="(item,index) in selectSpotList" :key="index">
                        {{ item.name }}
                        <i class="el-icon-circle-close" @click="delSpot(index)" v-if="!disabled"></i> 
                    </div>
                </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template slot="footer" v-if="!disabled">
        <el-button @click="visible = false">{{ $t("cancel") }}</el-button>
        <el-button type="primary" @click="dataFormSubmitHandle()">{{
          $t("confirm")
        }}</el-button>
      </template>
    </el-dialog>
  </template>
  
  <script>
  import debounce from "lodash/debounce";
  import mixinRegionModule from "@/mixins/region-module";
  
  export default {
    mixins: [mixinRegionModule],
  
    data() {
      return {
        visible: false,
        selectSpotList:[],
        spotList: [],
        dataForm: {
          id: "",
          routeName:"",
          scenicSpotIdlist:""
        },
      };
    },
    props: { disabled: Boolean },
    computed: {
      dataRule() {
        return {
            routeName: [
                { required: true, message: "请输入路线名称", trigger: "blur" }
            ]
        };
      },
    },
    methods: {
      open(){
        this.$http
        .get("/scenic/isscenicspot/page", {
          params: {
            page: 1,
            limit: 9999,
          },
        })
        .then(({ data: res }) => {
            res.data.list.forEach(l=>{
                this.spotList.push({id:l.spid,name:l.scenicSpotName});
            })
        });
      },
      close() {
        this.selectSpotList=[];
        this.spotList=[];
        this.dataForm = {
          id: "",
          routeName:"",
          scenicSpotIdlist:""
        };
        this.$emit("changeDisabled");
      },
      init() {
        this.visible = true;
        this.$nextTick(() => {
          this.$refs["dataForm"].resetFields();
          if (this.dataForm.id) {
            this.getInfo();
          }
        });
      },
      selectSpot(item){
        this.selectSpotList = [...this.selectSpotList,item];
      },
      delSpot(index){
        this.selectSpotList.splice(index,1);
      },
      // 获取信息
      getInfo() {
        this.selectSpotList = [];
        this.$http
          .get("/travel/travel/rentalcarroute?id=" + this.dataForm.id)
          .then(({ data: res }) => {
            if (res.code !== 0) {
              return this.$message.error(res.msg);
            }
            this.dataForm = {
              ...this.dataForm,
              ...res.data[0],
            };
            let scenicSpotIdlist = this.dataForm.scenicSpotIdlist.split(',');
            scenicSpotIdlist.forEach((s,i)=>{
                this.selectSpotList.push({
                    id:s,
                    name: res.data[0].spotNameList[i]
                })
            })
          })
          .catch(() => {});
      },
      // 表单提交
      dataFormSubmitHandle: debounce(
        function () {
          this.$refs["dataForm"].validate((valid) => {
            if (!valid) {
              return false;
            }

            if(this.selectSpotList.length==0) return this.$message.error('请选择途径景点');
            let ids = [];
            this.selectSpotList.forEach(s=>ids.push(s.id));
            this.dataForm.scenicSpotIdlist = ids.join(',');

            this.$http[!this.dataForm.id ? "post" : "put"](
              !this.dataForm.id ? "/travel/travel/rentalcarroute" : "/travel/travel/rentalcarroute",
              this.dataForm
            )
              .then(({ data: res }) => {
                if (res.code !== 0) {
                  return this.$message.error(res.msg);
                }
                this.$message({
                  message: this.$t("prompt.success"),
                  type: "success",
                  duration: 500,
                  onClose: () => {
                    this.visible = false;
                    this.$emit("refreshDataList");
                  },
                });
              })
              .catch(() => {});
          });
        },
        1000,
        { leading: true, trailing: false }
      ),
    }
  };
  </script>
  <style scoped lang="scss">
    ::v-deep.spot_list{
        width: 100%;
        overflow: hidden;
        max-height: 80px;
        overflow-y: auto;
        .sl_item{
            width: calc(25% - 10px);
            height: 30px;
            border: 1px solid #DCDFE6;
            float: left;
            margin-left: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 10px;
            cursor: pointer;
            &:nth-child(4n+1){
                margin-left: 0;
            }
            &:hover{
                // border: 1px solid #409eff;
                color: #409eff;
            }
        }
    }

    .spot_list_yx{
        overflow: hidden;
        margin-left: -10px;
        .sl_pre{
            display: flex;
            align-items: center;
            float: left;
            margin-left: 10px;
            i{
                font-size: 16px;
                margin-left: 5px;
                cursor: pointer;
            }
        }
    }
    ::v-deep .imgLabel {
      & > label::before {
        content: "*";
        color: #f56c6c;
        margin-right: 4px;
      }
    }
  </style>
  